<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kogito Visas</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
    <div class="jumbotron">
        <h1>Kogito Visas</h1>

        <p>Visa Applications approval service</p>
    </div>
    <div class="page-header">
        <div class="btn-group pull-right" role="group" style="padding-top: 10px;">
            <button class="btn btn-primary" onclick="load();">
                <span class="glyphicon glyphicon-refresh"></span> Refresh
            </button>
        </div>
        <h1>Visa applications</h1>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <thead>
                <tr>
                    <th>Traveller name</th>
                    <th>Destination</th>
                    <th>Duration</th>
                    <th>Passport number</th>
                    <th>Nationality</th>
                    <th>Approved</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="content">
                <!-- filled using Ajax -->
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<script>
    var graphql = __GRAPHQL_HTTP_ENDPOINT__;

    $(function () {
        $.ajaxSetup({
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        load();
        initModal();

        if ("WebSocket" in window) {

           // Let us open a web socket
           var ws = new WebSocket(__GRAPHQL_WS_ENDPOINT__);

           ws.onopen = function() {

              // Web Socket is connected, send data using send()
              ws.send('{"id" : "2", "type" : "start", "payload" : { "query" : "subscription { VisaApplicationsUpdated { id, visaApplication { lastName, firstName, country, city, nationality, duration, passportNumber, approved } metadata { processInstances { state  } } } }"}}');

           };

           ws.onmessage = function (evt) {
              var received_msg = evt.data;
              let jsonObject = JSON.parse(received_msg);
              var val = jsonObject.payload.data.VisaApplicationsUpdated;

              var existing = document.getElementById(val.id);
              if (existing != null) {
                existing.remove();
              }

              appendDataRow(null, val);
           };

           ws.onclose = function() {

              // websocket is closed.
           };
        }
    });

    function load() {
        $("#content").children().remove();
        var query = "{ \"query\": \"" +
                "{ VisaApplications { " +
                "id " +
                "visaApplication { lastName, firstName, country, city, nationality, duration, passportNumber, approved } " +
                "metadata { processInstances { state  } } " +
                "}}\"" +
                "}";

        $.ajax({
            type: 'POST',
            url: graphql,
            data: query,
            success: function (data) {
                $.each(data.data["VisaApplications"], function (key, val) {
                    appendDataRow(key, val);
                });
                initCallbacks();
            }
        });
    }

    function appendDataRow(key, val) {
      var active = $.grep(val.metadata.processInstances, function (pi) {
          return pi.state == "ACTIVE"
      }).length > 0;
      var html =
              "<tr id='" + val.id + "' class='" + (active ? "" : "active") + "'><td>" + val.visaApplication.lastName + ", " + val.visaApplication.firstName + "</td>" +
              "<td>" + val.visaApplication.country + ", " + val.visaApplication.city + "</td>" +
              "<td>" + val.visaApplication.duration + " days</td>" +
              "<td>" + val.visaApplication.passportNumber + "</td>" +
              "<td>" + val.visaApplication.nationality + "</td>" +
              "<td>" + (val.visaApplication.approved ? 'Yes' : 'No') + "</td>" +
              "<td>";
      if (active) {
          html +=
                  "<button class='btn btn-primary btn-sm' " +
                  "data-toggle='modal' " +
                  "data-target='#detailsModal' " +
                  "data-firstname='" + val.visaApplication.firstName + "' " +
                  "data-lastname='" + val.visaApplication.lastName + "' " +
                  "data-duration='" + val.visaApplication.duration + "' " +
                  "data-passportnumber='" + val.visaApplication.passportNumber + "' " +
                  "data-country='" + val.visaApplication.country + "' " +
                  "data-nationality='" + val.visaApplication.nationality + "' " +
                  "data-city='" + val.visaApplication.city + "' " +
                  "data-id='" + val.id + "'>" +
                  "   <span>Approval</span>" +
                  "</button>&nbsp;";
      }
      html += "</td></tr>";
      $(html).appendTo("#content");
    }

    function initCallbacks() {

    }

    function submitVisaApplicationApproval(decision) {

        var vapplication = {
            country: $("#country").val(),
            city: $("#city").val(),
            firstName: $("#firstName").val(),
            lastName: $("#lastName").val(),
            duration: Number($("#duration").val()),
            passportNumber: $("#passportNumber").val(),
            nationality: $("#nationality").val(),
            approved: Boolean(decision)
        };
        var visaApplicationRequest = JSON.stringify({application: vapplication});

        $.post("/visaApplications/" + $("#visa_p_id").val() + "/ApplicationApproval/" + $("#visa_t_id").val(), visaApplicationRequest, function () {

        }, "json");
    }

    function initModal() {

        $("#detailsModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var modal = $(this);

            $.getJSON("/visaApplications/" + id + "/tasks", function (data) {
                $.each(data, function (key, val) {
                    if ("ApplicationApproval" == val) {
                        modal.find('.modal-title').text("Visa application for " + button.data("lastname") + ", " + button.data("firstname"));
                        modal.find('#firstName').val(button.data("firstname"));
                        modal.find('#lastName').val(button.data("lastname"));

                        modal.find('#country').val(button.data("country"));
                        modal.find('#city').val(button.data("city"));

                        modal.find('#passportNumber').val(button.data("passportnumber"));
                        modal.find('#duration').val(button.data("duration"));
                        modal.find('#nationality').val(button.data("nationality"));

                        $("#visa_p_id").val(id);
                        $("#visa_t_id").val(key);
                    }
                });

            })

        })
    }
</script>
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <input type="hidden" id="visa_p_id"/>
                        <input type="hidden" id="visa_t_id"/>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Traveller</h3>
                            </div>
                            <div class="form-group">
                                <label for="firstName">First Name</label> <input type="text"
                                                                                 class="form-control" id="firstName" name="firstName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Last Name</label> <input type="text"
                                                                               class="form-control" id="lastName" name="lastName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="nationality">Nationality</label> <input type="text"
                                                                                    class="form-control" id="nationality" name="nationality" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Trip</h3>
                            </div>
                            <div class="form-group">
                                <label for="destinationCountry">Country</label> <input type="text"
                                                                                       class="form-control" id="country" name="destinationCountry" readonly>
                            </div>
                            <div class="form-group">
                                <label for="destinationCity">City</label> <input type="text"
                                                                                 class="form-control" id="city" name="destinationCity" readonly>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Stay information</h3>
                            </div>
                            <div class="form-group">
                                <label for="duration">Duration</label> <input type="text"
                                                                              class="form-control" id="duration" name="duration" readonly>
                            </div>

                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Documents</h3>
                            </div>
                            <div class="form-group">
                                <label for="passportNumber">Passport number</label> <input type="email"
                                                                                           class="form-control" id="passportNumber" name="passportNumber" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submitVisaApplicationApproval(true)">Approve</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="submitVisaApplicationApproval(false)">Reject</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
